<template>
    <div class="cus-tabs">
        <el-button>动态添加</el-button>
        <div class="tabs-wrapper">
            <a class="click-btn left" @click="clickPre">向左</a>
            <div class="tags-wrapper">
                <div class="scroll-box">
                    <ul class="tabsUl">
                        <li v-for="tab in tabList" :key="tab.id">{{tab.name}}</li>
                    </ul>
                </div>                
            </div>            
            <a class="click-btn right" @click="clickNext">向右</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'cusTabs',
        data() {
            let tabList = [];
            for(let i = 0; i < 20; i++) {
                tabList.push({
                    id: i + 1,
                    name: `tab${i+1}`,
                    current: false
                })
            }
            return {
                tabList
            }
        },
        methods: {
            clickPre() {

            },
            clickNext() {

            }
        }
    }
</script>

<style lang="scss" scoped>
.tabs-wrapper {
    margin: 50px;
    width: 500px;
    height: 36px;
    position: relative;
    .click-btn {
        position: absolute;
        width: 24px;
        text-align: center;
        height: 36px;
        background: #ccc;
        color: #f60;
        top: 0;
        cursor: pointer;
        &.left {
            left: 0;            
        }
        &.right {
            right: 0;
        }
    }
    .tags-wrapper {
        margin: 0 24px;
        height: 36px;
        overflow: hidden;
        position: relative;
    }
    .scroll-box {
        position: absolute;
        width: 8000px;
        height: 36px;
    }
    .tabsUl {
        height: 36px;
        position: absolute;
        li {
            list-style: none;
            float: left;
            min-width: 120px;
            line-height: 34px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #333;
            cursor: pointer;
        }
    }
}
</style>